<template>
  <div class="condition">
    <a-form class="form" :model="condition" inline>
      <a-space wrap style="margin-bottom: 0" :size="[32, 8]">
        <a-form-item class="item" v-for="item in condition" :key="item.title" :label="item.title">
          <div v-if="item.type == 'input'">
            <a-input
              class="input"
              v-model:value="item.value"
              allowClear
              :placeholder="item.placeholder"
            />
          </div>
          <div v-else-if="item.type == 'select'">
            <a-select
              class="input"
              v-model:value="item.value"
              @change="$emit('search')"
              allowClear
              :placeholder="item.placeholder"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode"
            >
              <a-select-option
                v-for="option in item.data"
                :label="option.label"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>
          </div>
          <div v-else-if="item.type == 'cascader'">
            <a-cascader
              v-model:value="item.value"
              allowClear
              v-bind="item.bind"
              :props="{
                label: item.label || 'label'
              }"
              :options="item.data"
              @change="$emit('search')"
              :load-data="item.loadData"
              :placeholder="item.placeholder"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode"
            />
          </div>
          <div v-else-if="item.type == 'multiple'">
            <a-select
              class="multiple"
              v-model:value="item.value"
              allowClear
              mode="multiple"
              @change="$emit('search')"
              :placeholder="item.placeholder"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode"
            >
              <a-select-option
                v-for="option in item.data"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>
          </div>
          <div v-else-if="item.type == 'dayRange'">
            <a-range-picker
              v-model:value="item.value"
              picker="date"
              value-format="YYYY-MM-DD"
              @change="$emit('search')"
              placeholder="['开始时间', '结束时间']"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode"
            />
          </div>
        </a-form-item>
        <template v-for="item in btns" :key="item">
          <template v-if="item == 'reset'">
            <a-button @click="$emit('reset')">重置</a-button>
          </template>
        </template>
        <slot />
      </a-space>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { debounce } from 'lodash'
defineProps({
  condition: Array<P.conditionItem>,
  btns: { default: () => [] }
})
defineEmits(['update:condition', 'search', 'reset'])
</script>

<style lang="less" scoped>
.form {
  ::v-deep(.ant-form-item) {
    display: inline-flex;
    margin-bottom: 0;
  }
  ::v-deep(.ant-form-row) {
    display: inline-flex;
  }
}
.input {
  width: 210px;
}
.condition {
  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  width: 100%;
}
</style>
